<!--景区列表-->
<template>
    <div class="mod-datasource">
        <div style="background: #fff; width: 100%; padding: 15px 15px 0 15px;">

            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" size="small">
               <el-form-item label="景区名称:">
                   <el-input v-model.trim="dataForm.spotName" placeholder="景区名称" clearable class="inputWidth"></el-input>
               </el-form-item>
                <el-form-item label="地区:">
                    <el-select v-model="dataForm.cityId" filterable placeholder="请选择景点所在的城市" clearable>
                        <el-option v-for="item in cityList" :key="item.cityId" :label="item.cityName" :value="item.cityId"></el-option>
                    </el-select>
               </el-form-item>
                <el-form-item label=" ">
                    <el-button @click="queryReset()" size="small">重置</el-button>
                    <el-button @click="getCurrentDataList()" type="primary" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tableBox">
            <div style="margin-right: 15px;width: 50%" >
                <p>目前景区</p>
                <template v-if="lockList.length === 0">
                    <el-table  :data="currentData.list" border :header-cell-style="{background: '#DBEDF6'}">
                        <el-table-column prop="spotId" label="景区编号" header-align="center" align="center">
                        </el-table-column>
                        <el-table-column label="景区基本信息" header-align="center" align="center" width="250">
                            <template slot-scope="scope">
                                <div>名称:{{scope.row.spotName}}</div>
                                <div>地址:{{scope.row.address}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="省份城市" header-align="center" align="center">
                            <template slot-scope="scope">
                                <div>{{scope.row.cityName}}</div>
                            </template>
                        </el-table-column>
                        <!--<el-table-column prop="supplierName" label="来源" header-align="center" align="center"></el-table-column>-->
                        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="lock(scope.$index)">锁定</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            :current-page="currentData.page"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="currentData.size"
                            :total="currentData.total"
                            layout="total, sizes, prev, pager, next, jumper"
                            @size-change="pageSizeChange"
                            @current-change="pageCurrentChange">
                    </el-pagination>
                </template>
                <template v-else>
                    <el-table  :data="lockList" border  :header-cell-style="{background: '#DBEDF6'}">
                        <el-table-column prop="spotId" label="景区编号" header-align="center" align="center">
                        </el-table-column>
                        <el-table-column label="景区基本信息" header-align="center" align="center" width="250">
                            <template slot-scope="scope">
                                <div>名称:{{scope.row.spotName}}</div>
                                <div>地址:{{scope.row.address}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="省份城市" header-align="center" align="center">
                            <template slot-scope="scope">
                                <div>{{scope.row.cityName}}</div>
                            </template>
                        </el-table-column>
                        <!--<el-table-column prop="supplierName" label="来源" header-align="center" align="center"></el-table-column>-->
                        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="cancelLock()">取消锁定</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table  v-if="awaitMergeList.length" style="margin-top: 10px" :data="awaitMergeList" border  :header-cell-style="{background: '#DBEDF6'}">
                            <el-table-column prop="thirdSpotId" label="景区编号" header-align="center" align="center">
                            </el-table-column>
                            <el-table-column label="" header-align="center" align="center" width="250">
                                <template slot-scope="scope">
                                    <div>名称:{{scope.row.title}}</div>
                                    <div>地址:{{scope.row.address}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="省份城市" header-align="center" align="center">
                                <template slot-scope="scope">
                                    <div>{{scope.row.cityName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="resourceFrom" label="来源" header-align="center" align="center"></el-table-column>
                            <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="deleteAwaitMerge(scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                    </el-table>
                    <el-button type="primary" @click="submitMerge" style="margin-top: 10px">合 并</el-button>
                </template>
            </div>
            <div style="width: 50%">
                <p>待合并其他景区</p>
                <el-table  v-loading="dataListLoading" :data="dataList"  border :height="tableHeight" :header-cell-style="{background: '#DBEDF6'}">
                    <el-table-column prop="thirdSpotId" label="景区编号" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column label="景区基本信息" header-align="center" align="center" width="250">
                        <template slot-scope="scope">
                            <div>名称:{{scope.row.title}}</div>
                            <div>地址:{{scope.row.address}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="省份城市" header-align="center" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.cityName}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="resourceFrom" label="来源" header-align="center" align="center"></el-table-column>
                    <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="addAwaitMerge(scope.$index)">加入待合并</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        :current-page="page"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="limit"
                        :total="total"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="pageSizeChangeHandle"
                        @current-change="pageCurrentChangeHandle">
                </el-pagination>
            </div>
          </div>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>是否{{updataText}}该产品</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="updataClick">确 定</el-button>
            </span>
          </el-dialog>
        </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/spot/mergedSpotList',
        getDataListIsPage: true
      },
      dataForm: {
        spotId: undefined,
        spotName: undefined,
        spotStatus: undefined,
        cityId: undefined,
        resourceStatus: undefined,
        resourceName: undefined
      },
      tableHeight: null,
      date: [],
      isNoteCheck: false,
      dataNote: [],
      cityList: [],
      dialogVisible: false,
      updataText: undefined,
      id: undefined,
      currentData: {
        list: [],
        limit: 10,
        total: 0,
        page: 1
      },
      lockList: [],
      awaitMergeList: []
    }
  },
  components: {
  },
  watch: {
    date (newVal, oldVal) {
      console.log('newVal', newVal)
      if (newVal == null) {
        this.dataForm.beginSettlementDate = null
        this.dataForm.endSettlementDate = null
      } else {
        this.dataForm.beginSettlementDate = newVal[0]
        this.dataForm.endSettlementDate = newVal[1]
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.tableHeight = document.documentElement.clientHeight - 310
    })
    this.getCityList()
  },
  methods: {
    getCityList () {
      this.$http.get('/form/getScenicCities').then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        console.log('r===============', res)
        this.cityList = res.data.data
      })
    },
    initData () {
      this.currentData = {
        list: [],
        limit: 10,
        total: 0,
        page: 1
      }
      this.lockList = []
      this.awaitMergeList = []
      this.getDataList()
      this.getCurrentDataList()
    },
    getCurrentDataList () {
      this.$http.get('/spot/getSpotList', { params: { limit: this.currentData.limit, page: this.currentData.page, ...this.dataForm } }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          const { list, total } = res.data
          this.currentData.list = list
          this.currentData.total = total
        }
      }).catch(() => {})
    },
    pageSizeChange (val) {
      this.currentData.page = 1
      this.currentData.limit = val
      this.getCurrentDataList()
    },
    pageCurrentChange (val) {
      this.currentData.page = val
      this.getCurrentDataList()
    },
    updataFun (id, status) {
      this.id = id
      status == '0' ? this.updataText = '上架' : this.updataText = '下架'
      this.dialogVisible = true
    },
    updataClick () {
      this.$http.get('/resource/updateResourceStatus', { params: { id: this.id } }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.getDataList()
          return this.$message.success(res.msg)
        }
      }).catch(() => {})
    },
    queryReset () {
      this.dataForm = {}
      this.currentData = {
        list: [],
        limit: 10,
        total: 0,
        page: 1
      }
      this.getCurrentDataList()
    },
    /** 锁定 */
    lock (index) {
      this.lockList = [this.currentData.list[index]]
    },
    /** 取消锁定 */
    cancelLock () {
      this.lockList = []
    },
    /** 加入待合并 */
    addAwaitMerge (index) {
      const currentData = this.dataList[index]
      if (this.awaitMergeList.findIndex(item => item.thirdSpotId === currentData.thirdSpotId) === -1) {
        this.awaitMergeList.push(currentData)
      }
    },
    /** 删除待合并 */
    deleteAwaitMerge (index) {
      this.awaitMergeList.splice(index, 1)
    },
    /** 提交合并 */
    submitMerge () {
      const spotId = this.lockList[0].spotId
      const thirdSpot = this.awaitMergeList.map(item => { return { supplierCode: item.resourceFrom, thirdSpotId: item.thirdSpotId } })
      if (!thirdSpot.length) {
        return this.$message.error('请添加待合并景点')
      }
      this.$http.post('/spot/mergeSpot', { spotId, thirdSpot }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.initData()
          return this.$message.success(res.msg)
        }
      }).catch(() => {})
    }
  }
}
</script>
<style scoped>
    .tableBox{
        background: #fff;
        display: flex;
        padding: 15px;
        margin-top: 15px;
        box-sizing: border-box;

    }
    p{
        font-weight: bold;
        font-size: 26px;
        margin: 0 0 10px 0;
    }
</style>
